<template>
    <div class="content-box">
      <e-heading class="title" grade="1">赛程预览</e-heading>
      <date-slider v-model="activeIndex" :list="dateList" @change="handleCheck"/>
      <div v-if="matchList.length">
        <!--赛程场地-->
        <place-group :list="matchList" v-model="selectedIndex" @change="handleSelect"/>

        <ul class="match-list">
          <li v-for="(item,$index) in gameList" class="match-item  clearfix" v-bind:class="{odd:$index%2==0}"
            :key="item.dateTime">
            <div class="match-date">
              <p>{{ new Date(item.startTime).format("yyyy-MM-dd hh:mm") }}</p>
              <p v-if="isKnockout">{{item.gradeRemark}}</p>
              <p v-else>第{{item.grade}}轮</p>
            </div>
            <div class="home-team">
              <div class="fl host tm-name">
                  <p>{{(item.hostUserName + (item.hostUserName2?'&'+item.hostUserName2: ''))|| '待定'}}</p>
              </div>
              <div class="fl">
                  <e-img-match :src="item.hostIconUrl || '/static/images/default-logo.png'"/>
              </div>
            </div>
            <div class="match-vs">
                <p class="match-vers">vs</p>
            </div>
            <div class="guest">
              <div class="fl">
                  <e-img-match :src="item.guestIconUrl || '/static/images/default-logo.png'"/>
              </div>
              <div class="fl  tm-name">
                  <p>{{(item.guestUserName + (item.guestUserName2?'&'+item.guestUserName2: ''))|| '待定'}}</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="no-match" v-else>没有比赛</div>

    
      <div class="button-box">            
        <el-button type="primary" @click="$router.go(-1)">返回编辑</el-button>
        <el-button @click="generate()">生成赛程</el-button>
      </div>
    </div>

</template>

<script>
  import api from 'api/race'
  import DateSlider from './components/DateSlider'
  import PlaceGroup from './components/PlaceGroup'
  import {mapGetters} from 'vuex'
  export default {
    components: {
      DateSlider,
      PlaceGroup
    },
    computed: {
      ...mapGetters({
        race_detail: 'race_detail'
      }),
      isLeague () { // 是积分联赛双循环
        return this.race_detail.matchFormatStr.includes('积分')
      },
      isKnockout () { // 淘汰赛
        return ['淘汰制1场', '淘汰赛1场'].indexOf(this.race_detail.matchFormatStr) > -1
      },
      isCup () { // 杯赛
        return this.race_detail.matchFormatStr.includes('杯赛')
      }
    },
    created () {
      this.getPreview()
    },
    data () {
      return {
        dateList: [], // 日期列表
        activeIndex: {},
        selectedIndex: 0,
        dateIndex: 0,
        matchList: [],
        placeList: [],
        gameList: [], // 比赛列表
        groupList: [], // 分组列表
        activeGroup: {}, // 选中的分组
        activeDate: {}, // 选中的日期
        selectedPlace: {} // 选中的场地
      }
    },
    methods: {
      // 获取赛程日期导航栏
      getPreview () {
        api.getSchedulePreview({matchId: this.$route.query.id}, this).then((data) => {
          this.dateList = data.data || []
          if (this.dateList.length) {
            this.activeIndex = this.dateList[0]
            this.getScheduleInfo(this.activeIndex)
          }
        })
      },
      // 获取某一天的赛程信息
      getScheduleInfo (date) {
        api.getScheduleInfo({
          matchId: this.$route.query.id,
          day: date.scheduleDate
        }, this).then((data) => {
          this.matchList = data.data
          this.gameList = this.matchList[0].matchScheduleResp
          this.selectedIndex = 0
        })
      },
      // 日期点击事件
      handleCheck (obj) {
        var item = obj
        if (item.matchNumber > 0) {
          this.getScheduleInfo(item)
        } else {
          this.gameList = []
          this.matchList = []
        }
      },
      // 场地切换事件
      handleSelect (index) {
        this.selectedIndex = index
        this.gameList = this.matchList[index].matchScheduleResp
      },
      // 生成赛程
      generate () {
        this.$confirm('确定要生成赛程？', '提示', {
          type: 'warning'
        }).then(() => {
          api.generateSchedule({matchId: this.$route.query.id}, {context: this}).then((res) => {
            if (this.isKnockout) { // 单淘汰赛
              this.$router.push({
                path: '/race/detail/manage/schedulecheck',
                query: this.$route.query
              })
            } else if (this.isLeague) {
              this.$router.push({ // 积分双循环
                path: '/race/detail/manage/edit',
                query: this.$route.query
              })
            } else {
              this.$router.push({ // 杯赛
                path: '/race/detail/manage/schedulecup',
                query: this.$route.query
              })
            }
          }).catch((err) => {
            this.$message({
              type: 'warn',
              message: err.msg
            })
          })
        })
      }
    }
  }
</script>

<style scoped rel="stylesheet/scss" lang="scss">
.match-item {
  padding: 10px 30px;
  &.odd {
    background: #f5f5f5;
  }
  div {
    float: left;
    p {
      color: #333;
      font-size: 12px;
    }
  }
  img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin: 0 20px;
  }
  .match-vers {
    font-weight: 700;
    color: #333;
    font-size: 16px;
    line-height: 38px;
  }
  .link {
    color: #3983e5;
    font-size: 12px;
  }
  .match-date {
    width: 150px;
    margin-right: 40px;
    p {
      line-height: 19px;
      text-align: center;
    }
  }
  .tm-name {
    p {
      line-height: 38px;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 100px;
      white-space: nowrap;
    }
  }
  .match-vs {
      margin: 0 30px;
  }
}

.match-item
.match-item .match-date,
.match-item .home-team,
.match-item .match-vs,
.match-item .guest {
  text-align: center;
}

.tm-name {
  span {
    display: inline-block;
    color: #fff;
    background-color: #fa9749;
    padding: 4px 6px;
    border-radius: 3px;
    margin: 5px 0;
  }
}

.no-match{
  margin-top: 50px;
}
.team-name{
  width:60px;
  line-height: 38px;
}
.horizon{
  line-height: 38px;
}
.no-margin{
  img{
    margin-left: 0;
    margin-right: 0;
  }
}
.host-team{
  margin-right:20px;
}
.guest-team{
  margin-left: 20px;
}
</style>
